<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.js"></script>
    <script src="../js/teacherIndex.js"></script>
</head>
<link rel="stylesheet" href="../css/studentAsk.css">
<link rel="stylesheet" href="../css/student.css">
<link rel="stylesheet" href="../css/teacher.css">
<style>
    textarea {
        border-radius: 10px;
        resize: none;
        border: none;
        outline: none;
        appearance: none;
        background-color: rgb(112, 172, 194);
        height: 100px;
        width: 100%;
        padding: 20px;
        font-size: 20px;
        color: white;
        margin-bottom: 30px;
    }
</style>

<body>
    <div class="header">
        <!-- <span class="cloud"></span> -->
        <div class="header-left">
            <h2>教师辅导平台</h2>
        </div>
        <ul class="nav">
            <!-- <li class="nav-son">
                    <a href="#" id="usermessage">个人信息</a>
                    <div class="getmessage">
                        <ul class="messages">
                            <li>用户名:</li>
                            <li>邮箱:</li>
                            <li>学分:</li>
                        </ul>
                        <span class="close">×</span>
                    </div>
                </li>
                <li class="nav-son">
                    <a href="#" class="askTeacher">咨询老师</a>
                </li> -->
            <li class="nav-son">
                <li><a class="tuichu userleave">leave</a></li>
            </li>

            <li class="nav-son">
                <a href="#" class="toallStudent"></a>
            </li>
        </ul>

    </div>
    <div class="body">
        <div class="mask">
            <div class="xians"><span>显示聊天框</span></div>
            <div class="w">
                <div class="tell">
                    <div class="tell-top">
                        <div class="getAsk"><a href="#">查询聊天记录</a>
                            <img class="tell-close" src="../img/关闭.png" alt="">
                            <img class="tell-close1" src="../img/缩小.png" alt="">
                            <img class="tell-close11" src="../img/放大.png" alt="">
                            <img class="tell-close2" src="../img/横杠.png" alt="">
                        </div>

                        <!-- 呈现数据 -->
                        <div class="studentTitle" id="studentTitle">
                        </div>
                    </div>

                    <div class="tell-bottom">
                        <div class="tell-icons">
                            <img class="tell-img" src="../img/表情.png" alt="">
                            <img class="tell-img" src="../img/GIF.png" alt="">
                            <img class="tell-img" src="../img/剪刀 剪切.png" alt="">
                            <img class="tell-img" src="../img/文件夹.png" alt="">
                            <img class="tell-img" src="../img/图片.png" alt="">
                            <img class="tell-img" src="../img/点.png" alt="">
                        </div>
                        <textarea class="tell-input" name="" id="" cols="25" rows="10"></textarea>
                        <div class="tell-submit">
                            <span class="tell-submit-span">发送</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">
            <!-- <div class="box-bottom">
                讲台
            </div> -->


            <!-- 此处设置了自动添加学生信息（ul)的js -->
            <!-- 右键按钮 -->
            <div id="menu" class="menu">
                <div class="menu__item score">评价 </div>
                <div class="menu__item message">学生具体信息</div>
                <div class="menu__item ask">提问</div>
                <!-- <div class="menu__item num"></div> -->
            </div>


            <!-- <div class="menu-two">
                <div class="bulletChat">给所有学生信息</div>
            </div> -->
        </div>
        <!-- 右键 -->
        <div class="youjian">
            <!-- 评分 -->
            <div class="getsocre">
                <ul class="scores">
                    <li class="name">
                        <p class="name-p"></p>
                        <textarea name="" class="evaluate" id="" cols="80" rows="20"></textarea>
                        <p class="name-p"></p>

                        <p style="text-align: center;">该节课的评分为:</p>
                        <div class="p-num" style="text-align: center;">
                            <a href="javascript:;" class="decrement">-</a>
                            <input type="text" class="itxt" value="1">
                            <a href="javascript:;" class="increment">+</a><br>
                        </div>
                    </li>
                    <button class="submitScroe">提交</button>
                </ul>
                <span class="close">×</span>

            </div>
            <!-- 学生具体信息 -->
            <div class="getmessage">
                <ul class="messages">
                    <li>姓名:</li>
                    <li>邮箱:</li>
                    <li>学分:</li>
                    <li>学号:</li>
                    <li>班级:</li>
                </ul>
                <span class="close">×</span>
            </div>
            <!-- 提问 -->
        </div>


    </div>
    <script>
        $(function() {
            $('.ask').click(
                function() {
                    $('.mask').show()
                }
            )
            $('.tell-close').click(
                    function() {
                        $('.mask').hide()
                        localStorage.removeItem('tell')
                    }
                )
                // 隐式迭代的好处
            $(".nav>li").mouseover(function() {
                $(this).children("ul").show();
            })
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })


        })
        window.onload = function() {
            var w = document.querySelector('.w');
            var xians = document.querySelector('.xians')
            var tellclose1 = document.querySelector('.tell-close1');
            var tellclose2 = document.querySelector('.tell-close2');
            var tellclose11 = document.querySelector('.tell-close11')
            tellclose1.addEventListener('click', function() {
                w.style.width = '100%';
                w.style.height = '100%';
                w.style.marginTop = '0px';
                this.style.display = 'none';
                tellclose11.style.display = 'block';
            })

            tellclose11.addEventListener('click', function() {
                w.style.width = '50%';
                w.style.height = '80%';
                w.style.marginTop = '100px';
                tellclose1.style.display = 'block';
                this.style.display = 'none';
            })
            tellclose2.addEventListener('click', function() {
                w.style.display = 'none';
                xians.style.display = 'block';


            })
            xians.addEventListener('click', function() {
                w.style.display = 'block';
                this.style.display = 'none';
            })
        }
    </script>
</body>

</html>